<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <div class="container-body">
                    <el-form :inline="true" :model="queryParams" size="mini">
                        <el-col :span="24">
                            <el-button style="margin-right: 6px" size="mini"
                                :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle
                                @click="showLeft(show)"></el-button>
                            <el-form-item label="拌合楼">
                                <el-select style="width: 130px" v-model="queryParams.stationCode" clearable size="mini"
                                    placeholder="请选择拌合楼">
                                    <el-option v-for="item in cementListData" :key="item.id" :label="item.name"
                                        :value="item.code"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="级配类型">
                                <el-select style="width: 120px" v-model="queryParams.matchType" clearable size="mini"
                                    placeholder="请选择级配类型">
                                    <el-option v-for="item in matchTypeList" :key="item.id" :label="item.type"
                                        :value="item.type"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="配方编号">
                                <el-select style="width: 120px" v-model="queryParams.matchCode" clearable size="mini"
                                    placeholder="请选择">
                                    <el-option v-for="item in matchCodeList" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" type="primary" @click="handleQuery()">查询</el-button>
                            </el-form-item>
                        </el-col>

                    </el-form>

                    <el-table :data="dataList" v-loading="loading" fit border size="mini" highlight-current-row stripe>
                        <!-- <el-table-column prop="name" label="所属基地" align="center"></el-table-column> -->
                        <el-table-column prop="stationName" label="拌合楼" align="center"></el-table-column>
                        <el-table-column prop="dischargeTime" label="日期" align="center"></el-table-column>
                        <el-table-column prop="matchType" label="级配类型" align="center">
                            <template>{{ queryParams.matchType | showMatchType }}</template>
                        </el-table-column>
                        <el-table-column prop="weight" label="当日产量(t)" align="center"></el-table-column>
                        <el-table-column prop="totalWeight" label="累计量(t)" align="center"></el-table-column>
                    </el-table>
                    <pagination class="fenye" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import {
    sysStationList,// 沥青拌合楼
    getInitMatchCode,// 配方编号
    asphaltMatchTypeList,//级配类型
    produceWeight,//列表
} from "@/api/bitumenMixingStation/producedData/totalCheck";
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
    name: "totalCheck", //总量校核 
    components: { workSiteLeft },

    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            submitting: true,
            visible: false,
            isAdd: true,
            dataList: [],
            loading: false,//表格加载
            loadingForm: false,//新增修改加载
            cementListData: [],//拌合楼下拉列表
            matchTypeList: [],//级配类型
            matchCodeList: [],
            projectIdList: [],
            matchNameList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            produceTypeOptions: [
                {
                    value: '1',
                    label: '进料加工'
                },
                {
                    value: '0',
                    label: '来料加工'
                }
            ],
        };
    },
    filters: {
        showMatchType(val) {
            if (val) {
                return val
            }
            return '全部'
        }
    },

    created() {
        this.getCementList();
        this.getAsphaltMatchTypeList()
        this.getInitMatchCodeData()
        this.getList();
    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.handleQuery();
        },
        getList() {
            this.loading = true;
            produceWeight(this.queryParams).then((res) => {
                this.dataList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },

        // 配方编号
        getInitMatchCodeData() {
            getInitMatchCode().then((res) => {
                this.matchCodeList = res.data
            })
        },
        // 查询拌合楼下拉列表
        getCementList() {
            sysStationList({
                type: 'asphalt'
            }).then((res) => {
                this.cementListData = res.data || [];
            });
        },
        // 级配类型
        getAsphaltMatchTypeList() {
            asphaltMatchTypeList().then((res) => {
                this.matchTypeList = res.data;
            });
        },
    },
};
</script>
<style scoped>
.myForm>>>.el-input-number {
    width: 100%;
}

.myForm>>>.el-input__inner {
    text-align: left;
}

.myForm>>>.el-input-number {
    width: 100%;
}

.myForm>>>.el-input__inner {
    text-align: left;
}

.form-item-out {
    margin-bottom: 0px;
}

.colSplit {
    text-align: center;
    font-size: 16px;
}

.el-col {
    border: 1px solid transparent;
}
</style>
<style scoped lang="scss"></style>
  
  
  
  
  
  